<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
      @open="handleOpen"
      @close="handleClose"
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>项目结项</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div class="px-[5px] pt-[10px] text-right" v-if="detailData.processInstanceId">
        <el-link type="primary" @click="checkHistoryModalVisible = true">审核记录</el-link>
      </div>
      <!-- 项目信息 -->
      <ProjectInfo :projectId="projectId" />
      <!-- 基本信息 -->
      <BaseInfo :detailData="detailData" />
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <!-- 办理业务时 -->
            <template v-if="verifyRoleType.isKyry()">
              <el-button
                type="primary"
                @click="handleCancel"
                v-if="detailData.checkstatus == 1"
                :loading="cancelLoading"
                >撤销</el-button
              >
            </template>
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
  <CheckHistoryModal
    v-model="checkHistoryModalVisible"
    :procInsId="detailData.processInstanceId"
    :checker="detailData.checker"
    :checkDate="detailData.checkdate"
  />
</template>

<script setup>
import CheckHistoryModal from "@/views/project/components/CheckHistoryModal.vue";
import BaseInfo from "./BaseInfo.vue";
import ProjectInfo from "./ProjectInfo.vue";
import { recordsDetail } from "@/api/project/zx/xmjx";
import { cancelProcess } from "@/api/project/common";
import { verifyRoleType } from "@/utils/main";
import { ElMessageBox, ElMessage } from "element-plus";
const dialogVisible = ref(false);
const projectId = ref(null);
const operateId = ref(null);
const checkHistoryModalVisible = ref(false);
const detailData = ref({});
const cancelLoading = ref(false);
//查看
const view = (proId, id) => {
  projectId.value = proId;
  operateId.value = id;
  dialogVisible.value = true;
};
defineExpose({ view });
//获取数据详情
const getDetail = async () => {
  try {
    const res = await recordsDetail(operateId.value);
    detailData.value = res.data;
  } catch (error) {
    console.log(error);
  }
};
//点击撤销
const handleCancel = () => {
  ElMessageBox.confirm("撤销后，该审批流程将自动结束，是否确认取消？", "提示", {
    type: "warning",
  }).then(async () => {
    try {
      cancelLoading.value = true;
      const res = await cancelProcess(detailData.value.processInstanceId);
      if (res.data) {
        ElMessage({
          message: "操作成功！",
          type: "success",
        });
        dialogVisible.value = false;
      } else {
        ElMessage({
          message: "操作失败！",
          type: "error",
        });
      }
    } catch (error) {
      console.log(error);
    } finally {
      cancelLoading.value = false;
    }
  });
};
const handleOpen = () => {
  getDetail();
};
const handleClose = () => {
  cancelLoading.value = false;
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
